@use "variables" as *;

/**
 * 步骤条
 * ----------------------
 * 当前代码通用性更强一些
 */
.sea-steps {
    padding: 0;
    list-style: none;
    margin: $sea-gap-width;
    display: inline-block;

    .sea-steps-item {
        display: inline-block;

        //
        strong {
            cursor: pointer;
        }

        // 分隔符
        .sea-steps-separator {
            cursor: default;
            margin: 0 12px;
        }

        //
        &:last-child > .sea-steps-separator {
            display: none;
        }
    }
}

/**
 * 面包屑
 * ----------------------
 * 样式上和步骤条完全一致，但是代码构成更加简单
 */
.sea-breadcrumb {
    margin: 0;

    > * {
        cursor: pointer;
        position: relative;

        display: inline-block;
        padding-right: 28px; /* 为斜杠留出空间 */

        &::after {
            content: "/";
            position: absolute;
            right: 0;
            margin: 1px 12px 0 12px; /* 中文情况 margin-top 需要修正 1px */
            font-weight: lighter;
            color: $sea-color-gray;
        }

        /* 如果是最后一个步骤，隐藏斜杠 */
        &:last-child::after {
            content: none;
        }
    }
}

/**
 * file-picker
 * ----------------------
 * 文件上传组件，兼容图片上传
 */
$sea-uploader-gap: 4px; // 间隙
$sea-uploader-size: 96px; // 每一个元素的基础大小
$sea-uploader-padding: 6px; // 内边框
$sea-uploader-border: $sea-border; // 边框
$sea-uploader-radius: 2px; // 圆角大小

$sea-uploader-remove-size: 26px; // 移除按钮的大小
.sea-uploader {
    display: flex;
    cursor: pointer;
    gap: $sea-uploader-gap;
    color: $sea-text-color-regular;

    // 图片上传组件元素
    > .sea-uploader-item {
        position: relative;
        width: $sea-uploader-size;
        height: $sea-uploader-size;
        border: $sea-uploader-border;
        padding: $sea-uploader-padding;
        border-radius: $sea-uploader-radius;

        // 图片上传的杨思
        > .sea-uploader-image {
            width: 100%;
            height: 100%;
            // 图片的平铺方式
            object-fit: contain;
        }

        // 不可预览的文件 font-icon 样式
        > .sea-uploader-file {
            width: 100%;
            height: 100%;
            text-align: center;
            background-color: $sea-fill-color;

            // 文件名
            > div {
                font-size: 26px;
                line-height: 56px;
            }

            // 文件原名
            > .sea-filename {
                display: inline-block;
                font-size: smaller;
                width: 86px; /* 设置固定宽度 */
                white-space: nowrap; /* 禁止换行 */
                overflow: hidden; /* 隐藏溢出内容 */
                direction: rtl; /* 从右到左的文本方向 */
                text-overflow: ellipsis; /* 显示省略号 */
            }
        }

        // 上传按钮
        > .sea-uploader-button {
            width: 96px;
            height: 96px;
            cursor: pointer;
            font-size: 26px;
            line-height: 86px;
            text-align: center;
            background-color: $sea-fill-color;
        }

        // 移除按钮
        > .sea-uploader-remove {
            position: absolute;
            top: 0;
            right: 0;

            width: $sea-uploader-remove-size;
            height: $sea-uploader-remove-size;
            border-bottom-left-radius: calc($sea-uploader-remove-size / 2);
            background-color: $sea-mask-color-light;

            text-align: center;
            line-height: $sea-uploader-remove-size;

            color: $sea-color-primary;
            font-size: 18px;

            &:hover {
                font-size: 20px;
                background-color: $sea-fill-color;
            }
        }
    }
}

/**
 * 气泡弹窗配套的角标 V2
 *
 * 设计思路：矩形块旋转 45度，实际是个菱形；
 * 设计缺陷：因为用到了 transform 属性，居中对齐的时候，需要注意代码的写法；
 * -------------------------------------------------------
 * 场景：给组件添加一个角标
 * 优势：逻辑简单，自动跟随容器的边框、背景色
 * 缺陷：要求组件布局必须是：position: relative，可能会破坏布局
 */
$arrow-size: 10px; // 矩形的边长，用于控制箭头大小
$arrow-offset: -5px; // 箭头相对于边框的位置，精准值为 math.sqrt($arrow-size)
$arrow-position: 10px; // 位置，相对于组件坐标（left, top）的位置

// 箭头 - 菱形块
@mixin arrow-base($direction) {
    position: absolute;
    content: "";
    width: $arrow-size;
    height: $arrow-size;
    transform: rotate(45deg);
    box-sizing: border-box;
    background-color: inherit;

    @if $direction == left {
        border-left: inherit;
        border-bottom: inherit;
    } @else if $direction == right {
        border-top: inherit;
        border-right: inherit;
    } @else if $direction == top {
        border-top: inherit;
        border-left: inherit;
    } @else if $direction == bottom {
        border-right: inherit;
        border-bottom: inherit;
    }
}

/**
 * 伪元素实现
 * -------------------------------------------------------
 * 使用起来非常方便，大部分场景可以直接使用
 */
.arrow-left {
    position: relative;
    margin-left: $arrow-size;

    &::after {
        top: $arrow-position;
        left: $arrow-offset;
        @include arrow-base(left);
    }
}

.arrow-right {
    position: relative;
    margin-right: $arrow-size;

    &::after {
        top: $arrow-position;
        right: $arrow-offset;
        @include arrow-base(right);
    }
}

.arrow-top {
    position: relative;
    margin-top: $arrow-size;

    &::after {
        left: $arrow-position;
        top: $arrow-offset;
        @include arrow-base(top);
    }
}

.arrow-bottom {
    position: relative;
    margin-bottom: $arrow-size;

    &::after {
        left: $arrow-position;
        bottom: $arrow-offset;
        @include arrow-base(bottom);
    }
}

/**
 * 角标设计
 * -------------------------------------------------------
 * 使用很像 font-icon，可以放到 i 标签上，
 * 可以通过调整 i 标签的 left/top 属性，精准控制角标位置
 */
.font-arrow-left {
    @include arrow-base(left);
    left: $arrow-offset;
}

.font-arrow-right {
    @include arrow-base(right);
    right: $arrow-offset;
}

.font-arrow-top {
    @include arrow-base(top);
    top: $arrow-offset;
}

.font-arrow-bottom {
    @include arrow-base(bottom);
    bottom: $arrow-offset;
}

/**
 * 角标设计 - floating-ui.js 代码兼容
 * -------------------------------------------------------
 * 气泡相对于按钮的方向，角标相对于气泡的方向，其实是相反的（轴对称），
 * 所以有些代码能会怪怪的，看起来像是写反了。
 *
 * 这一套代码没什么缺点，比 popper.js 拥有更高的兼容性
 */
$sea-arrow-offset: -6px;
.sea-popper {
    /* Float on top of the UI */
    position: absolute;
    /* Avoid layout interference */
    width: max-content;

    > .sea-popper__arrow {
        border-color: inherit;
        background-color: inherit;

        &[data-popper-placement^=top]{
            @include arrow-base(bottom);
            bottom: $sea-arrow-offset;
        }

        &[data-popper-placement^=bottom]{
            @include arrow-base(top);
            top: $sea-arrow-offset;
        }

        &[data-popper-placement^=left]{
            @include arrow-base(right);
            right: $sea-arrow-offset;
        }


        &[data-popper-placement^=right]{
            @include arrow-base(left);
            left: $sea-arrow-offset;
        }
    }
}

/**
 * 通过 css 相对布局实现的吸附窗口
 * -------------------------------------------------------
 * 优点：通过 css 样式实现的，性能相对较好，更加实用的方式；
 * 缺点：是增加了一层 div，特定场合下，可能会影响界面布局。
 */
// attribute
$float-box-z-index: 100;
$float-box-bg: white;
$float-box-border: 1px solid #ddd;
$float-box-radius: 4px;
$float-box-padding: 12px;
// 阴影预留值
$float-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
$float-box-shadow: $sea-box-shadow;

// base-setting
@mixin float-panel {
    position: absolute;
    z-index: $float-box-z-index;
    box-shadow: $float-box-shadow;
}

.sea-float-box {
    position: relative;
    display: inline-block;

    .float-top {
        @include float-panel;
        left: 0; // 左对齐
        //right: 0; // 右对齐
        bottom: 100%; // 底边对齐
        margin-bottom: 10px;
    }

    .float-bottom {
        @include float-panel;
        left: 0; // 左对齐
        //right: 0; // 右对齐
        top: 100%; // 顶部对齐
        margin-top: 10px;
    }

    .float-left {
        @include float-panel;
        top: 0;
        right: 100%;
        margin-right: 10px;
    }

    .float-right {
        @include float-panel;
        top: 0;
        left: 100%;
        margin-left: 10px;
    }
}


/**
 * 气泡弹窗
 * -------------------------------------------------------
 * 气泡窗口，默认展示在屏幕外，需要通过属性微调，才能正常显示
 * 与之关联的组件 sea-popover.vue。
 *
 * 特殊的 left/top 设计，是防止组件无法计算宽高。
 */
.sea-popover {
    position: fixed;
    width: 150px;
    padding: 10px;
    border-radius: 3px;
    box-shadow: 1px 2px 10px #ccc;

    /**z-index 低于element-ui大部分弹窗**/
    z-index: 100;

    background-color: $sea-color-white;

    top: -1000px;
    left: -1000px;
}


/**
 * 按钮色彩设计
 * ------------------------------------------------------------
 * 不包含大小设计
 */
.btn {
    color: var(--sea-btn-text-color, var(--sea-text-color-regular));
    background-color: var(--sea-btn-bg-color, var(--sea-bg-color));

    border-width: 1px;
    border-style: solid;
    border-color: var(--sea-btn-border-color, var(--sea-border-color));

    &:hover {
        color: var(--sea-btn-hover-text-color, var(--sea-color-primary));
        background-color: var(--sea-btn-hover-bg-color, var(--sea-color-primary-light-9));
        border-color: var(--sea-btn-hover-border-color, var(--sea-color-primary-light-7));
    }

    &.disabled {
        color: var(--sea-btn-disabled-text-color, var(--sea-text-color-disabled));
        cursor: not-allowed;
        background-image: none;
        background-color: var(--sea-btn-disabled-bg-color, var(--sea-bg-color));
        border-color: var(--sea-btn-disabled-border-color);
    }

    &:disabled {
        cursor: not-allowed;
    }
}

/**
 * 输入框色彩设计
 * ------------------------------------------------------------
 * 不包含大小设计，shadow 方式实现
 */
.input-group {
    > .input-prefix {
        color: $sea-text-color-secondary;
        background-color: $sea-fill-color-lighter;
        box-shadow: 1px 0 0 $sea-border-color-darker inset, 0 1px 0 $sea-border-color-darker inset, 0 -1px 0 $sea-border-color-darker inset;

        &:hover {
            background-color: $sea-fill-color-light;
        }
    }

    > .input-suffix {
        color: $sea-text-color-secondary;
        background-color: $sea-fill-color-lighter;
        box-shadow: -1px 0 0 $sea-border-color-darker inset, 0 1px 0 $sea-border-color-darker inset, 0 -1px 0 $sea-border-color-darker inset;

        &:hover {
            background-color: $sea-fill-color-light;
        }
    }

    > .input-wrapper {
        box-shadow: 0 0 0 1.2px $sea-border-color inset;

        &:hover {
            box-shadow: 0 0 0 1px $sea-border-color-darker inset;
        }

        &:focus-within {
            box-shadow: 0 0 0 1px $sea-color-primary inset;
        }

        > input {
            color: $sea-text-color-regular;
        }

        > .input-prefix-inner {
            color: $sea-text-color-placeholder;
        }

        > .input-suffix-inner {
            color: $sea-text-color-placeholder;
        }
    }
}

/**
 * 通用小卡片
 * -----------------------------------------------------------
 * 通常与网格布局混合使用，用于展示数据列表；
 * 样式特点：带鼠标悬停效果，可以理解成大型的按钮；
 * 适用场景：设备列表、菜单栏等，
 */
.small-card {
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    padding: $sea-padding;
    border-radius: $sea-border-radius-base;

    color: var(--sea-box-text-color, var(--sea-text-color-regular));
    border-color: var(--sea-box-border-color, var(--sea-border-color));
    background-color: var(--sea-box-bg-color, var(--sea-bg-color));

    &.active {
        color: var(--sea-box-active-color, var(--sea-text-color-regular));
        border-color: var(--sea-box-active-border-color, var(--sea-border-color-dark));
        background-color: var(--sea-box-active-bg-color, var(--sea-fill-color-extra-light));
    }

    &:hover {
        color: var(--sea-box-hover-text-color, var(--sea-text-color-regular));
        border-color: var(--sea-box-hover-border-color, var(--sea-border-color-dark));
        background-color: var(--sea-box-hover-bg-color, var(--sea-fill-color-light));
    }

    &.disabled {
        cursor: not-allowed;
        color: var(--sea-box-disabled-text-color, var(--sea-text-color-disabled));
        border-color: var(--sea-box-disabled-border-color, var(--sea-border-color-dark));
        background-color: var(--sea-box-disabled-bg-color, var(--sea-fill-color-lighter));
    }
}

/**
 * 输入框基础样式
 * ------------------------------------
 * 设计得没问题，但是强大的输入框组件，绝不是单纯靠 input、select 可以实现的。
 */
.sea-input {
    border: 0;
    outline: 0;
    border-radius: $sea-border-radius-base;

    padding: 0 15px;

    color: $sea-text-color-regular;
    box-shadow: 0 0 0 1px $sea-border-color inset;

    &.no-border {
        box-shadow: none !important;

        &:hover {
            background-color: $sea-fill-color-lighter;
        }
    }

    &:hover {
        box-shadow: 0 0 0 1px $sea-border-color inset;
    }

    &:focus {
        box-shadow: 0 0 0 1px $sea-color-primary inset;
    }
}


/**
 * 滑块设计
 * ------------------------------------
 * 更好看的滑块设计，允许多段背景色
 */
//this.style.background = `linear-gradient(to right, #4CAF50 0%, #4CAF50 ${percentage}%, #ddd ${percentage}%, #ddd 100%)`;
.slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #ddd;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}